new Vue({
    el: '#app',
    data: {
      cartList: [
        {
          id: 1,
          goodsName: '男士休闲裤夏季新款',
          count: 1,
          price: 99.0,
          color: '灰色',
          size: 'L',
          imgUrl: 'images/goods-1.png',
          checked: false
        },
        {
          id: 2,
          goodsName: '男士夏季装短袖polo衫',
          count: 1,
          price: 199.0,
          color: '浅蓝',
          size: 'M',
          imgUrl: 'images/goods-2.png',
          checked: false
        }
      ],
      isAllSelected: false,
      // 新增模态框显示控制变量
      isModalVisible: false
    },
    computed: {
      // 计算已选中商品的总数量
      totalSelectedCount() {
        return this.cartList.reduce((total, item) => {
          return item.checked? total + item.count : total;
        }, 0);
      },
      // 计算已选中商品的总价格
      totalSelectedPrice() {
        return this.cartList.reduce((total, item) => {
          return item.checked? total + item.count * item.price : total;
        }, 0).toFixed(2);
      }
    },
    methods: {
      // 增加商品数量
      increaseQuantity(index) {
        if (this.cartList[index].count < 10) {
          this.cartList[index].count++;
        }
        this.updateTotalPrice();
      },
      // 减少商品数量
      decreaseQuantity(index) {
        if (this.cartList[index].count > 1) {
          this.cartList[index].count--;
        }
        this.updateTotalPrice();
      },
      // 删除已选中的商品
      deleteSelectedGoods() {
        this.cartList = this.cartList.filter(item =>!item.checked);
        this.isAllSelected = false;
        this.updateTotalPrice();
      },
      // 清空购物车
      clearAllGoodsInCart() {
        // 清空购物车列表数据
        this.cartList = [];
        // 关闭全选状态
        this.isAllSelected = false;
        // 更新总价和数量显示
        this.updateTotalPrice();
        // 显示模态框
        this.showModal();
      },
      // 去结算
      goToCheckout() {
        // 这里可以添加实际的结算逻辑，如跳转到结算页面等
        console.log('去结算');
      },
      // 全选/全不选
      selectAll() {
        this.cartList.forEach(item => {
          item.checked = this.isAllSelected;
        });
        this.updateTotalPrice();
      },
      // 更新总价和数量显示
      updateTotalPrice() {
        let total = 0;
        let count = 0;
        this.cartList.forEach(item => {
          if (item.checked) {
            total += item.price * item.count;
            count += item.count;
          }
        });
        this.$refs.totalPrice.textContent = `总计：￥${total.toFixed(2)}`;
        this.$refs.countValue.textContent = `${count}`;
      },
      // 新增显示模态框方法
      showModal() {
        this.isModalVisible = true;
      },
      // 新增关闭模态框方法
      closeModal() {
        this.isModalVisible = false;
      }
    },
    mounted() {
      this.updateTotalPrice();
    }
  });